<template>
    <div class="common-wrapper">
      <div class="common-search">
        <a-form-model :model="queryForm" layout="inline">
          <a-form-model-item label="名称">
            <a-input v-model="queryForm.role_name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="getTableData" type="primary" icon="search" class="l-mg-r10">搜索</a-button>
            <a-button @click="onAdd(null)" type="primary" icon="plus" class="l-mg-r10">添加</a-button>
            <a-button @click="onDel" type="danger" icon="delete" class="l-mg-r10" :disabled="!hasSelected"
              >删除</a-button
            >
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="common-main">
        <a-table
          size="middle"
          rowKey="pkey"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :scroll="{ y: 600, x: 1200 }"
          :data-source="dataSource"
          bordered
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a-button @click="onAdd(record)" type="link" icon="plus">添加下级</a-button>
            <a-button @click="onEdit(record)" type="link" icon="edit" size="small">修改</a-button>
            <a-button @click="onDel(record.pkey)" type="link" icon="delete" size="small">删除</a-button>
          </template>
        </a-table>
      </div>
      <MenuForm ref="menuFormRef" />
    </div>
  </template>
    
    <script>
  import { getMenuListApi, delMenuApi } from '@/api/manager'
  import MenuForm from './components/menuForm.vue';
  export default {
    components: {
        MenuForm
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    data() {
      const columns = [
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
          width: 250,
        },
        {
          title: '菜单名称',
          dataIndex: 'component',
          align: 'center',
          width: 300,
        },
        {
          title: '菜单ID',
          dataIndex: 'menu_number',
          align: 'center',
          width: 150,
        },
        {
          title: 'URL路径',
          dataIndex: 'url_path',
          align: 'center',
          width: 280,
        },
        {
          title: '重定向地址',
          dataIndex: 'redirect',
          align: 'center',
          width: 300,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 280,
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        }
      ]
      return {
        queryForm: {
          role_name: '',
        },
        columns,
        /* 分页参数 */
        pagination: {
          current: 1,
          pageSize: 99999,
          showTotal: (total, range) => {
            return ' 共' + total + '条'
          },
          total: 0,
        },
        loading: false,
        dataSource: [],
        selectedRowKeys: [],
        selectedRows: [],
      }
    },
    created() {
      this.getTableData()
    },
    methods: {
      onAdd(row) {
        this.$refs.menuFormRef.add(row)
      },
      onEdit(row) {
        this.$refs.menuFormRef.edit(row)
      },
      onDel(pkey = null) {
        this.$confirm({
          title: '提示',
          content: '确定删除吗？',
          onOk: async () => {
            const { statusCode, errors } = await delMenuApi({
              pkeys: pkey ? [pkey] : this.selectedRowKeys,
            })
            if (statusCode == 200) {
              this.$message.success('删除成功！')
              this.selectedRowKeys = []
              this.getTableData()
            } else {
              this.$message.error(errors)
            }
          },
        })
      },
      // 选择数据
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleTableChange(pagination, filters, sorter) {
        this.pagination = pagination
        this.getTableData()
      },
      // 获取菜单列表
      async getTableData() {
        this.loading = true
        const { data } = await getMenuListApi({
          ...this.queryForm,
          page_index: this.pagination.current,
          page_size: this.pagination.pageSize,
        })
        this.loading = false
        const threeList = this.listToTree(data.items,0)
        this.dataSource = threeList
        this.pagination.total = data.totalCount
      },
      /**
     * 数组转树形结构
     * @param list 源数组
     * @param parentId 父ID
     */
    listToTree(list, parentId) {
      let tree = []
      list.forEach((item) => {
        // 判断是否为父级菜单
        if (item.parent_menu_number == parentId) {
          // 迭代 list， 找到当前菜单相符合的所有子菜单
          const children = this.listToTree(list, item.menu_number)
          if (children.length ) {
            item.children = children;
          }else {
            // item.children = []
          }
          // 加入到树中
          tree.push(item)
        }
      })
      return tree
    },
    },
  }
  </script>
    
    <style lang="less" scoped>
  </style>